<template>
  <image class="top_bg_image" src="/static/topbg.png" mode="scaleToFill" />
  <view class="top_view">
    <view class="">
      <image class="picture" src="/static/material/m4.png" mode="aspectFill"></image>
    </view>
    <view class="top_right_view">
      <view class="title">
        薛之谦2023中国巡演-广州站薛之谦2023中国广州站
      </view>
      <view class="tip_views">
        <view class="tip_txt">#演唱会</view>
        <view class="tip_txt tip_text2">8966人想看</view>
      </view>
      <view class="rmb">
        <text class="rmb_icon">￥</text><text class="rmb_num">99</text><text class="rmb_last"> 起</text>
      </view>
      <view class="wanna_see">

        <image class="icon" src="/static/heart-fill.png" mode="aspectFill"></image>
        <text>想看</text>
      </view>
    </view>
  </view>
  <view class="basic_view">

    <view class="time_view">
      <view class="time_text">2023.09.13 周日 18:00</view>
      <view class="time_desc">（约120分钟，以现场为准）</view>
    </view>

    <view class="address_view">
      <image class="address_image" src="/static/map.png" mode="scaleToFill"></image>
      <image class="address_position" src="/static/position_black.png" mode="scaleToFill"></image>
      <view class="address_city">
        广州 . 正佳广场
      </view>
      <view class="address_detailed">
        长沙市雨花区劳动中路2号
      </view>
    </view>

    <view class="service_view">
      <text>服务保障：</text>
      <uni-icons class="checkbox_tip" type="checkbox" size="14"></uni-icons>
      <text class="checkbox_text">不支持退换</text>
      <uni-icons class="checkbox_tip" type="checkbox" size="14"></uni-icons>
      <text class="checkbox_text">实名观演</text>
      <uni-icons class="checkbox_tip" type="checkbox" size="14"></uni-icons>
      <text class="checkbox_text">纸质票</text>

    </view>
  </view>

  <view class="sticky_view " style="position: sticky;" :class="{'st':true,'sticky-fixed':isF}">
    <view v-for="item in tabList" class="sticky_lab">
      {{item.title}}
    </view>
  </view>

  <view class="title_group">
    <view class="vertical_line">
    </view>
    <view class="title_txt">演出详情</view>
  </view>

  <view class="content">
    <view class="content_text">
      薛之谦，这位拥有独特嗓音和深情内涵的音乐才子，以其优秀的音乐才华和独特的音乐风格，深受广大乐迷的喜爱。他的音乐作品不仅歌词写实，情感真挚，更能直触内心最柔软的地方。而这一次，兰州的乐迷们将亲临现场，近距离感受他音乐的魅力，快来薛之谦兰州
    </view>
  </view>

  <view class="title_group">
    <view class="vertical_line">
    </view>
    <view class="title_txt">购票须知</view>
  </view>

  <view class="content">
    <view class="content_text">

      <view class="content_title">
        入场规则
      </view>
      <view class="content_label">
        本场演出采用纸质票并携带观演人相关证件核验入场。
      </view>
      <view class="content_title">
        实名制购票
      </view>
      <view class="content_label">
        应演出主办单位及相关部门的要求，本场演出实行实名制购票政策，入场须携带相关证件。
      </view>
      <view class="content_title">
        配送说明
      </view>
      <view class="content_label">
        不支持修改收货地址和配送方式，请务必在下单前核实您填写的收货地址和手机号码，为保证成功购票，请您使用(中国大陆地区)有效手机号码。
      </view>
      <view class="content_title">
        实名制购票
      </view>
      <view class="content_label">
        应演出主办单位及相关部门的要求，本场演出实行实名制购票政策，入场须携带相关证件。
      </view>
      <view class="content_title">
        退换政策
      </view>
      <view class="content_label">
        票品为有价证券，非普通商品，其背后承载的文化服务具有时效性、唯一性等特征，如非演出变更、演出取消、票品错误的原因，不提供退换票服务，购票时请务必仔细核对并谨慎下单。
      </view>
      <view class="content_title">
        特殊提示
      </view>
      <view class="content_label">
        因市场变化、不可抗力等客观情形以及演出票随订随售的性质，可能会出现演出变更、取消、或正式出票时票品库存不足等情况，该等情形下票豆客服会及时与您联系并尽快退款。首页 客服 想看 缺票登记
      </view>

    </view>
  </view>

  <view class="title_group">
    <view class="vertical_line">
    </view>
    <view class="title_txt">为你推荐</view>
  </view>

  <view class="now_view">
    <scroll-view scroll-x="true" :show-scrollbar="false">
      <view v-for="(item , index) in material" class="ticket-item" :style="{'margin-left': (index == 0 ? '5%' : '0')}">
        <view class="ticket_img">
          <image class="ticket_img_image" :src="item.img" mode="aspectFill" />
          <view class="type_text">
            <text>{{item.text}}</text>
          </view>
        </view>
        <text class="ticket_title">{{item.title}}</text>
      </view>
    </scroll-view>
  </view>

  <view class="pay_view">
    <view class="pay_btn" @click="open">
      立即购买
    </view>
  </view>
  <uni-popup ref="popup" type="bottom">
    <view class="pop_view">

      <view class="pop_title">
        场次
      </view>
      <view class="session_view">
        <view @click="click_session(index)" class="session" :class="{'session_select':item.select==1}"
          v-for="(item,index) in paramData.session">
          {{item.title}}
        </view>
      </view>
      <view class="pop_title">
        票档
      </view>
      <view @click="click_ticket(index)" class="ticket" :class="{'ticket_select':item.select==1}"
        v-for="(item,index) in paramData.ticket">
        <view class="ticket_left">
          <view class="ticket_name">
            {{item.title}}
          </view>
          <view class="ticket_stock">
            库存：{{item.stock}}
          </view>
        </view>
        <view class="ticket_right">
          <text class="ticket_icon">￥</text>{{item.money}}
        </view>
      </view>

      <view class="num_view">
        <view class="num_left">
          <view class="num_name">数量</view>
          <view class="num_desc">每人最多可购买1张</view>

        </view>
        <view class="num_right">

          <view class="num_reduce" @click="reduce()">
            <view class="reduce_symbol">
            </view>
          </view>
          <view class="num">
            {{num}}
          </view>
          <view class="num_plus" @click="plus()">
            <image class="num_plus_icon" src="../../static/plus.png" mode="scaleToFill"></image>
          </view>
        </view>
      </view>
      <view class="pop_line" />
      <view class="pop_bottom_view">
        <view class="pop_bottom_left">
          <view class="left_word">
            应付
          </view>
          <view class="left_icon">
            ￥
          </view>
          <view class="left_num">
            {{total}}
          </view>
        </view>
        <view class="pop_bottom_right" @click="to_pay()">
          我选好了
        </view>
      </view>
      <view class="pop_bottom_bgview">

      </view>
    </view>
  </uni-popup>
</template>

<script>
  export default {
    data() {
      return {
        // 下拉固定
        // yuanH: uni.upx2px(800),
        yahuaH: 452,
        isF: false,
        // 滑动tab
        tabCur: 0,
        num: 0,
        total: 0,
        tabList: [{
          title: '详情',
        }, {
          title: '须知',
        }, {
          title: '推荐',
        }],
        paramData: {
          session: [{
            title: "2023-09-01 周五 20:00",
            select: 0
          }, {
            title: "2023-09-08 周六 20:00",
            select: 0
          }, {
            title: "2023-09-08 周六 20:00",
            select: 0
          }],
          ticket: [{
            title: "预售票",
            money: 130,
            stock: 8,
            select: 0
          }, {
            title: "现场票",
            money: 150,
            stock: 0,
            select: 0
          }, {
            title: "站台票",
            money: 80,
            stock: 3,
            select: 0
          }]
        },
        material: [{
          img: "/static/material/m1.png",
          title: "2023珠海草莓音乐节莓音乐【9月29日】",
          text: "演唱会",
          day: 1,
        }, {
          img: "/static/material/m2.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "音乐会",
          day: 1,
        }, {
          img: "/static/material/m3.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "剧场演出",
          day: 2,
        }, {
          img: "/static/material/m4.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "演唱会",
          day: 2,
        }, {
          img: "/static/material/m4.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "演唱会",
          day: 3,
        }, {
          img: "/static/material/m4.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "演唱会",
          day: 4,
        }, ],
        recommend: [{
          src: "/static/material/m5.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m4.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m3.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m2.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }],
      };
    },
    onPageScroll(e) {
      //#ifdef H5
      this.isF = true
      // #endif
      // #ifndef H5
      // console.log(this.yuanH + '--' + e.scrollTop)
      if (this.yuanH > e.scrollTop) {
        this.isF = false
      } else {
        this.isF = true
      }
      // #endif
    },
    methods: {
      open() {
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('bottom')
      },
      click_session(index) {
        for (var i = 0; i < this.paramData.session.length; i++) {
          this.paramData.session[i].select = 0
          if (i == index) {
            this.paramData.session[i].select = 1
          }
        }
      },
      click_ticket(index) {
        for (var i = 0; i < this.paramData.ticket.length; i++) {
          this.paramData.ticket[i].select = 0
          if (i == index) {
            this.paramData.ticket[i].select = 1
          }
        }
        this.compute()
      },
      plus() {
        this.num++
        this.compute()
      },
      reduce() {
        this.num--
        if (this.num <= 0) this.num = 0
        this.compute()
      },
      compute() {
        var is_sel = 0
        var money = 0
        this.paramData.ticket.forEach(function(value, key, item) {
          if (value.select == 1) {
            is_sel = 1
            money = value.money
          }
        })
        // uni.showToast({
        //   title: '请先选择场次',
        //   icon: 'error',
        //   duration: 1000
        // })
        this.total = money * this.num
      },
      to_pay() {
        uni.navigateTo({
          url: '/pages/index/payinfo'
        })
      }
    },

  };
</script>

<style scoped lang="scss">
  .top_bg_image {
    width: 100%;
    height: 300px;
    display: block;
  }

  .top_view {
    width: 100%;
    height: 100px;
    margin-top: -290px;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;

    .picture {
      width: 110px;
      height: 144px;
      border-radius: 10px;
      margin-left: 20px;
    }

    .top_right_view {
      margin-left: 15px;
      margin-right: 15px;
      height: 145px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;

      .title {
        height: 44px;
        line-height: 22px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        text-align: LEFT;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .tip_views {
        margin-top: 20px;

        .tip_txt {
          background-color: rgba(0, 0, 0, 0.4);
          font-size: 10px;
          text-align: center;
          padding: 0 5px;
          height: 25px;
          line-height: 25px;
          border-radius: 4px;
          color: white;
          float: left;
        }

        .tip_text2 {
          margin-left: 5px;
        }
      }

      .rmb {
        position: absolute;
        left: 0;
        bottom: 0px;

        .rmb_icon {
          font-size: 12px;
          font-family: DIN, DIN-700;
          font-weight: 700;
          color: #ff0000;
          line-height: 14px;
        }

        .rmb_num {
          width: 22px;
          height: 24px;
          line-height: 23px;
          font-size: 24px;
          font-family: DIN, DIN-700;
          font-weight: 700;
          text-align: LEFT;
          color: #fd5359;
        }

        .rmb_last {
          width: 10px;
          height: 14px;
          opacity: 0.4;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC-400;
          font-weight: 400;
          text-align: LEFT;
          color: #333333;
          line-height: 16px;
        }
      }

      .wanna_see {
        position: absolute;
        right: 0;
        bottom: 0px;
        text-align: center;
        width: 72px;
        height: 31px;
        line-height: 40px;
        background-color: #FD5359;
        color: white;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;

        .icon {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .basic_view {
    width: 100%;
    height: 190px;
    background-color: white;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding-top: 80px;
    margin-bottom: 20px;

    .time_view {
      width: 90%;
      height: 37px;
      line-height: 37px;
      margin: 10px 5% 10px 5%;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      border-radius: 4px;

      .time_text {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        text-align: LEFT;
        color: #333333;
      }

      .time_desc {
        opacity: 0.3;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-400;
        font-weight: 400;
        text-align: LEFT;
        color: #333333;
      }
    }

    .address_view {
      width: 90%;
      height: 65px;
      margin: 20px 5% 20px 5%;
      border-radius: 10px;
      position: relative;

      .address_image {
        width: 100%;
        height: 65px;
      }

      .address_position {
        width: 40px;
        height: 40px;
        position: absolute;
        right: 20px;
        top: 15px;
      }

      .address_city {
        width: 80%;
        height: 20px;
        position: absolute;
        left: 20px;
        top: 10px;
        font-size: 15px;
        font-weight: 600;
      }

      .address_detailed {
        width: 80%;
        height: 20px;
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 13px;
        color: #333333;
        // font-weight: 500;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }

    .service_view {
      width: 90%;
      height: 20px;
      margin: 10px 5% 10px 5%;
      font-size: 13px;
      display: flex;
      justify-content: left;
      align-items: center;

      .checkbox_tip {
        margin-left: 6px;
      }

      .checkbox_text {
        margin-left: 2px;
      }
    }
  }

  .sticky_view {
    width: 100%;
    height: 50px;
    background-color: white;
    // padding-left: 5%;
    // z-index: 999;

    display: flex;
    justify-content: left;
    align-items: center;

    .sticky_lab {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-600;
      font-weight: 600;
      text-align: LEFT;
      color: #333333;
      margin-right: 30px;
      margin-left: 5%;
    }
  }

  .sticky-fixed {
    position: sticky;
    position: fixed;
    top: 0;
    // z-index: 999;
  }

  .title_group {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    background-color: white;
    // margin: 15px 5%;
    // width: 90%;
    width: 100%;
    padding: 10px 0;

    .vertical_line {
      width: 3px;
      height: 15px;
      background-color: black;
      margin-left: 5%;
    }

    .title_txt {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-600;
      font-weight: 600;
      text-align: LEFT;
      color: #333333;
      margin-left: 10px;
    }
  }

  .content {
    width: 100%;
    padding: 15px 0;
    background-color: white;

    .content_text {
      margin: 0 5%;
      width: 90%;
      font-size: 14px;
      font-weight: 400;
      text-align: JUSTIFIED;
      color: #333333;

      .content_title {
        font-size: 18px;
        font-weight: 600;
        margin: 20px 0;
      }

      .content_label {
        font-size: 12px;
        font-weight: 400;
        text-align: JUSTIFIED;
        color: #9b9b9b;
        margin: 15px 0;
      }
    }
  }

  .now_view {
    width: 100%;
    height: 210px;
    white-space: nowrap;
    // padding: 0 5%;
    background-color: white;
    margin-top: 20px;

    .ticket-item {
      display: inline-block;
      margin-right: 10px;
      height: 210px;
      width: 100px;

      .first_ticket {
        margin-left: 5%;
      }

      .ticket_img {
        background-size: cover;
        width: 100px;
        height: 160px;
        border-radius: 10px;

        .ticket_img_image {
          width: 100px;
          height: 160px;
          border-radius: 5px;
          position: absolute;
        }
      }

      .type_text {
        color: #fff;
        font-size: 13px;
        text-align: center;
        width: 60px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        margin: 10px;
      }

      .day_text {
        color: #fff;
        text-align: center;
        width: 100px;
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        background-color: rgba(0, 0, 0, 0.8);
        position: absolute;
        margin-top: 135px;
        border-radius: 5px;

        .day_text_color {
          color: #FD5359;
        }
      }

      .ticket_title {
        height: 40px;
        // line-height: 40px;
        font-size: 14px;
        font-weight: 400;
        text-align: LEFT;
        color: #000000;
        margin-top: 10px;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .ticket_title2 {
        width: 100%;
        height: 40px;
        // line-height: 40px;
        font-size: 15px;
        font-weight: 400;
        // text-align: LEFT;
        color: #000000;
        margin-top: 10px;
        word-wrap: break-word;

      }
    }
  }

  .pay_view {
    width: 100%;
    height: 60px;
    background-color: #fff;
    padding: 10px 0;
    position: sticky;
    bottom: 0;

    .pay_btn {
      width: 90%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 0 5%;
      background: #fd5359;
      border-radius: 20px;
      color: white;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .pop_view {
    width: 100%;
    // height: 500px;
    background-color: white;
    padding: 20px 0;
    margin-bottom: -30px;

    .pop_title {
      font-size: 15px;
      font-weight: 600;
      text-align: LEFT;
      color: #333333;
      margin-top: 15px;
      margin-left: 5%;
    }

    .session_view {
      display: flex;
      justify-content: space-between;
      width: 90%;
      margin-left: 5%;
      flex-wrap: wrap;

      .session {
        margin-top: 10px;
        width: 48%;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        background: #f8f8f8;
        font-size: 11px;
        font-weight: 400;
        text-align: center;
        color: #333333;
      }

      .session_select {
        border: 1px solid #333333;
        height: 34px;
      }
    }

    .ticket {
      width: 90%;
      height: 70px;
      margin: 10px 5%;
      background: #f8f8f8;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .ticket_left {
        display: flex;
        flex-direction: column;
        align-items: center;


        .ticket_name {
          font-size: 13px;
          font-weight: 600;
          color: #333333;
          margin-left: 20px;
          margin-bottom: 5px;
        }

        .ticket_stock {
          font-size: 10px;
          font-weight: 400;
          color: #c7c7c7;
          margin-left: 20px;

        }
      }

      .ticket_right {
        font-size: 20px;
        font-weight: 500;
        margin-right: 20px;

        .ticket_icon {
          font-size: 13px;
          font-weight: 600;
        }

        .ticket_money {
          font-size: 20px;
          font-weight: 500;
        }
      }
    }

    .ticket_select {
      border: 1px solid #333333;
      height: 68px;
    }

    .num_view {
      margin: 30px 5% 10px 5%;
      width: 90%;
      height: 30px;
      display: flex;
      justify-content: space-between;
      // line-height: 30px;

      .num_left {
        font-size: 10px;
        font-weight: 400;
        color: #c7c7c7;
        height: 30px;
        display: flex;
        justify-content: left;

        .num_name {
          font-size: 15px;
          font-weight: 600;
          color: #333333;
          margin-right: 10px;
          margin-top: 5px;
        }

        .num_desc {
          margin-top: 12px;
        }
      }

      .num_right {
        display: flex;
        justify-content: center;

        .num_reduce {
          width: 30px;
          height: 30px;
          background: #f2f2f2;
          border-radius: 4px;
          align-items: center;

          .reduce_symbol {
            width: 16px;
            height: 4px;
            background-color: #828282;
            margin-top: 13px;
            margin-left: 7px;
          }
        }

        .num {
          font-size: 20px;
          font-weight: 500;
          color: #333333;
          margin: 0 10px;
        }

        .num_plus {
          width: 26px;
          height: 26px;
          border: 2px solid #d9d9d9;
          border-radius: 4px;

          .num_plus_icon {
            width: 20px;
            height: 20px;
            margin: 3px;
          }
        }
      }
    }

    .pop_line {
      width: 100%;
      height: 2px;
      background-color: #F0F0F0;
      margin: 30px 0 10px 0;
    }

    .pop_bottom_view {
      width: 90%;
      margin: 10px 5%;
      height: 40px;
      display: flex;
      justify-content: space-between;

      .pop_bottom_left {
        display: flex;
        justify-content: left;
        align-items: flex-end;

        .left_word {
          font-size: 15px;
          font-weight: 600;
          color: #333333;
        }

        .left_icon {
          font-size: 13px;
          font-family: PingFang SC, PingFang SC-600;
          font-weight: 600;
          text-align: LEFT;
          color: #ff0000;
          margin: 0 10px;
        }

        .left_num {
          font-size: 24px;
          font-family: DIN, DIN-500;
          font-weight: 500;
          text-align: LEFT;
          color: #ff0000;
          height: 28px;
        }
      }

      .pop_bottom_right {
        width: 160px;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        background: #fd5359;
        border-radius: 20px;
        color: white;
        margin-top: 8px;
      }
    }

    .pop_bottom_bgview {
      width: 100%;
      height: 30px;
    }
  }
</style>